{include file="common/header" /}

<!-- 中间区域 -->

<style>

    .spec_active{

        font-weight: bold;

        color: blue;

        background: #777;

        box-shadow: 2px 3px 4px 4px #ccc;

        /* border: none!important; */

    }
        /* 定义动画 */
    @keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
    }

    /* 应用动画 */
    .animated-logo {
    animation: slideIn 0.5s ease-out;
    }

</style>

<div class="top_box">

    <div class="layui-main block1">

        <div class="t2">{$catInfo.keywords}</div>

        <div class="t1">{$catInfo.title}</div>

    </div>

    <div class="img1 img_100">

        <img class="" src="{$catInfo.logo}">

    </div>

</div>

<div class="product-right-nav">

    <p class="more-btn">查看更多产品<i ></i></p>

    <nav>

        <ul>

            {if count($goods_detail['models'])} 

                {volist name="goods_detail.models" id="models"} 

                    <div class="item models_select"  data-id="{$models.id}" style="cursor: pointer;" >

                        <div class="img_100">

                            <img src="{$models.thumb}">

                        </div>

                        <p>{$models.name}</p>

                    </div>

                {/volist}

            {/if}

        </ul>

        

    </nav>

</div>

<main class="product">

    <section>

        <div class="layui-main">

            <div class="d-flex gap90 flex-wrap gap20-xs ">

             <div class="product-details-swiper">

                 <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
                    <div class="img_100">
                       
                        <img  id="logo" class="animated-logo" src="{$goods_detail.logo}" />

                    </div>
                    <div class="swiper-wrapper">
                        
                        {if count($goods_detail['slides'])} 

                            {volist name="goods_detail.slides" id="slides"} 

                                <div class="swiper-slide">

                                    <div class="img_100">

                                        <img src="{$slides}" />

                                    </div>

                                </div>

                            {/volist}

                        {/if}

                        <!-- {if count($goods_detail['models'])} 

                            {volist name="goods_detail.models" id="models"} 

                                <div class="swiper-slide" id="{$models.id}">

                                    <div class="img_100">

                                        <img src="{$models.thumb}" />

                                    </div>

                                </div>

                            {/volist}

                        {/if} -->

                    </div>

                </div>

                <div class="thum-box d-grid  layui-hide-xs">

                    <div class="layui-icon layui-icon-up prev"></div>

                    <div thumbsSlider="" class="swiper mySwiperThum">

                        <div class="swiper-wrapper">
                            <div class="swiper-slide">

                                <div class="img_100">
    
                                    <img src="{$goods_detail.logo}" />
    
                                </div>
    
                            </div>
                            {if count($goods_detail['slides'])} 

                            {volist name="goods_detail.slides" id="slides"} 

                                <div class="swiper-slide">

                                    <div class="img_100">

                                        <img src="{$slides}" />

                                    </div>

                                </div>

                            {/volist}

                        {/if}

                            <!-- {if count($goods_detail['models'])} 

                                {volist name="goods_detail.models" id="models"} 

                                    <div class="swiper-slide">

                                        <div class="img_100">

                                            <img src="{$models.thumb}" class="models_select_swpiper" style="cursor: pointer;" data-id="{$models.id}" />

                                        </div>

                                    </div>

                                {/volist}

                            {/if} -->

                        </div>

                    </div>

                    <div class="layui-icon layui-icon-down next"></div>

                </div>

            </div>

            <input type="hidden" name="model_id"  class="model_ids" value="{$models_first ? $models_first->id : 0} ">

           <div class="product-infot flex-1">

               <h1 class="ft30 pt30 pb30">{$goods_detail.title}</h1>

                <p class="mb30 models_name"></p>

                <dl id="specs">

                        <!-- {if isset($models_first->attributes_info)} 

                            {volist name="$models_first->attributes_info" id="models"} 

                            <dd>{$models.name}：{$models.value}</dd>

                            {/volist}

                        {/if} -->

                </dl>

                <div class="more">

                    <button class="layui-btn">  <span>点击查看全部参数</span>

                <i class="layui-icon layui-icon-down"></i></button>

                   

                 </div>

                 </div>

                

            </div>

        



        </div>

    </section>

    <h2>产品详情</h2>

    <section>

        <div class="layui-main ">

            <div class="s_content">

                {$goods_detail.content|raw|nl2br}

            </div>

        </div>

    </section>

</main>

<div class="order-confrim product-order-confrim">

    <div class="layui-main d-flex al-c jc-s">

        <div>购物车已选择<span data-count="all"> 1</span> 件产品</div>

        <div class="d-flex flex-column-xs gap40 gap20-xs al-c">

            <div class="num-box" data-type="number">

                <i  class="layui-icon cart_min layui-icon-subtraction"></i>

                <input data-name="number" class="layui-input" value="1">

                <i  class="layui-icon  cart_add layui-icon-addition"></i>

            </div>

            <div class="d-flex al-c br20">



                <button class="layui-btn add_cart">加入购物车</button>

                <button class="layui-btn red-btn sure_order">立即下单</button>

            </div>

        </div>

    </div>

</div>

<script src="__ROOT__/public/home/js/index.js"></script>

<script src="__ROOT__/public/home/js/swiper-bundle.min.js"></script>

<script src="__ROOT__/public/static/index.js"></script>

<script>

    

    $(document).on('click','.more',function () {

        $(this).remove()

        $('.product-infot ').css({

            height:'auto',

            

        })

    })

    $(document).on('click','.more-btn',function () {

        $('.product-right-nav').toggleClass('open')

    })



    $(document).on('click','.add_cart',function () {

        let field = {

            goods_id : "{$goods_detail.id}" ,

            model_id : $('.model_ids').val(),

            cart_num : $('span[data-count="all"]').text()

        }

        ajaxRequest('/goods-cart-add', field, 'POST', this, function (response) {

            layer.msg('添加成功', {icon: 1, time: 2000}, function() {

         

             });

        });

    })



    $(document).on('click','.sure_order',function () {

        let field = {

            goods_id : "{$goods_detail.id}" ,

            model_id : $('.model_ids').val(),

            cart_num : $('span[data-count="all"]').text()

        }

        ajaxRequest('/goods-sure-order', field, 'POST', this, function (response) {

            layer.msg('下单成功', {icon: 1, time: 2000}, function() {

         

             });

        });

    })



    

    

    

    $(document).ready(function() {

         // 获取购物车数量元素

            var $countDisplay = $('span[data-count="all"]');

            

            // 获取数量输入框和按钮

            var $numInput = $('input[data-name="number"]');

            var $decrementBtn = $('.layui-icon-subtraction');

            var $incrementBtn = $('.layui-icon-addition');

            

            // 点击减号按钮

            $decrementBtn.on('click', function() {

                var currentValue = parseInt($numInput.val());

                if (currentValue > 1) { // 最小为1

                    currentValue--;

                    $numInput.val(currentValue); // 更新输入框值

                    updateCartCount(currentValue); // 更新购物车已选择的数量

                }

            });

            

            // 点击加号按钮

            $incrementBtn.on('click', function() {

                var currentValue = parseInt($numInput.val());

                currentValue++;

                $numInput.val(currentValue); // 更新输入框值

                updateCartCount(currentValue); // 更新购物车已选择的数量

            });



            // 更新购物车已选择的数量

            function updateCartCount(count) {

                $countDisplay.text(count); // 更新显示的数量

            }



        var swiper = new Swiper(".mySwiperThum", {

            loop: true,

            spaceBetween: 10,

            slidesPerView: 4,

            freeMode: true,

            watchSlidesProgress: true,

            direction: 'vertical',

        });

        var swiper2 = new Swiper(".mySwiper2", {

            loop: true,

            spaceBetween: 10,

            navigation: {

                nextEl: ".next",

                prevEl: ".prev",

            },

            thumbs: {

                swiper: swiper,

            },

        });

        function fetchModelDetails(modelId,swiper = false) {

            $.ajax({

                url: '/goods-spec-detail-' + modelId, // 替换为实际的处理 URL

                method: 'GET',

                success: function(response) {

                    if (response.code === 1) {

                        updateSpecInfo(response.data); // 更新规格信息
                        if(response.data.thumb){
                            $('#logo').addClass('animated-logo');

                            // 设置新图片链接
                            $('#logo').attr('src', response.data.thumb);

                            // 动画结束后移除动画类
                            setTimeout(function () {
                            $('#logo').removeClass('animated-logo');
                            }, 500); // 动画持续时间 0.5s
                        }

                        if(!swiper){

                            updateSwiperSlide(modelId); // 更新对应的swiper幻灯片

                        }

                       

                    } else {

                        // 失败返回时显示错误

                        $('#specs').html('<dd>加载属性失败，请重试。</dd>');

                    }

                },

                error: function() {

                    // 请求失败时显示错误

                    $('#specs').html('<dd>请求失败，请重试。</dd>');

                }

            });

        }



                // 更新swiper的slide

        function updateSwiperSlide(modelId) {

            var targetSlide = $('#' + modelId); // 获取对应型号的 swiper-slide

            if (targetSlide.length > 0) {

                var slideIndex = targetSlide.index(); // 获取该 slide 的索引

                swiper2.slideTo(slideIndex); // 跳转到该索引的幻灯片

            }

        }



        // 更新规格信息

        function updateSpecInfo(data) {

            $('#specs').empty(); // 清空现有内容

            $('.models_name').text(data.name); // 更新型号名称



            if (data.attributes_info.length > 0) {

                data.attributes_info.forEach(function(attribute) {

                    var dd = '<dd>' + attribute.name + '：' + attribute.value + '</dd>';

                    $('#specs').append(dd);

                });

            }

        }

        // 为 .models_select 添加点击事件监听器

        $('.models_select').on('click', function() {

            var modelId = $(this).data('id'); // 获取点击的模型 id

            $('.model_ids').val(modelId)

            $(this).siblings('.models_select').removeClass('spec_active');

            $(this).addClass('spec_active')
            fetchModelDetails(modelId)
            // updateSwiperSlide(modelId)

        });



        // $('.models_select_swpiper').on('click',function(){

        //     fetchModelDetails(modelId)

        // })



        swiper2.on('slideChange', function() {
            var activeIndex = this.activeIndex;

            // 获取当前幻灯片的 DOM 元素
            var activeSlide = this.slides[activeIndex];

            // 获取图片链接（假设存储在 data-src 属性中）
            var imageSrc = $(activeSlide).find('img').attr('src');
            if(imageSrc){
                $('#logo').addClass('animated-logo');

                // 设置新图片链接
                $('#logo').attr('src', imageSrc);

                // 动画结束后移除动画类
                setTimeout(function () {
                $('#logo').removeClass('animated-logo');
                }, 500); // 动画持续时间 0.5s
            }

            // var activeSlide = swiper.slides[swiper2.activeIndex]; // 获取当前显示的 slide

            // var modelId = $(activeSlide).find('img').data('id');

            // fetchModelDetails(modelId,true)

        })

    });



</script>



<!-- 中间区域结束 -->

{include file="common/footer" /}